<template>
  <transition name="fade">
    <cube-popup
      v-show="visible"
      position="bottom"
      type="shop-cart-list"
      ref="shopCartList"
      :mask-closable="true"
      @mask-click="maskClick"
    >
      <transition name="move" @after-leave="onLeave">
        <div v-show="visible" class="list-wrapper">
          <div class="list-header">
            <h4 class="title">购物车</h4>
            <div class="empty" @click="empty">清空</div>
          </div>
          <cube-scroll class="list-content" ref="listContent">
            <ul class="list-main">
              <li class="list-item" v-for="(food, index) in selectFoods" :key="index">
                <div class="flex-wrapper">
                  <h4 class="name">{{food.name}}</h4>
                  <div class="price">{{food.price}}</div>
                  <cart-control @add="onAdd" :food="food"></cart-control>
                </div>
                <div class="line"></div>
              </li>
            </ul>
          </cube-scroll>
        </div>
      </transition>
    </cube-popup>
  </transition>
</template>
<script>
import CartControl from '../cart-control/cart-control.vue'
import popupMixin from '../../common/mixins/popup'

const EVENT_LEAVE = 'leave'
const EVENT_ADD = 'add'
const EVENT_SHOW = 'show'

export default {
  mixins: [popupMixin],
  name: 'shop-cart-list',
  props: {
    selectFoods: {
      type: Array,
      default() {
        return []
      }
    }
  },
  created() {
    this.$on(EVENT_SHOW, () => {
      this.$nextTick(() => {
        this.$refs.listContent.refresh()
      })
    })
  },
  methods: {
    maskClick() {
      this.hide()
    },
    onLeave() {
      this.$emit(EVENT_LEAVE)
    },
    empty() {
      this.$createDialog({
        type: 'confirm',
        content: '确认清空购物车吗？',
        $events: {
          confirm: () => {
            this.selectFoods.forEach((food) => {
              food.count = 0
            })
            this.visible = false
          }
        }
      }).show()
    },
    onAdd(target) {
      this.$emit(EVENT_ADD, target)
    }
  },
  components: {
    CartControl
  }
}
</script>
<style lang='stylus' scoped>
@import '../../common/stylus/variable.styl'
@import '../../common/stylus/mixin.styl'

.cube-shop-cart-list
  bottom 48px
  opacity 1
  &.fade-enter, &.fade-leave-active
    opacity 0
  &.fade-enter-active, &.fade-leave-active
    transition all 0.2s ease-in-out
  .move-enter, .move-leave-active
    transform translate3d(0, 100%, 0)
  .move-enter-active, .move-leave-active
    transition all 0.3s ease-in-out
  .list-wrapper
    max-height 257px
    overflow hidden
    .list-header
      display flex
      justify-content space-between
      height 40px
      padding 0 18px
      background $color-background-ssss
      border-1px()
      .title
        line-height 40px
        font-size $fontsize-medium
        font-weight 200
        color $color-text
      .empty
        line-height 40px
        font-size $fontsize-small
        color $color-blue
    .list-content
      max-height 217px
      overflow hidden
      padding 0 18px
      background $color-white
      .list-item
        height 48px
        .flex-wrapper
          display flex
          align-items center
          height 48px
          .name
            flex 1
            line-height 24px
            font-size $fontsize-medium
            color $color-text
          .price
            width 24px
            line-height 24px
            font-size $fontsize-medium
            font-weight 700
            color $color-red
          .cartcontrol
            width 80px
        .line
          border-1px($color = $color-row-line)
</style>
